<template>
  <div class="w" style="padding-bottom: 100px;">
    <mall-shelf title="支付订单">
      <div slot="content">
        <!--<div class="box-inner order-info">
          <h3>提交订单成功，请填写捐赠信息</h3>
          <p class="payment-detail">请在 <span>24 小时内</span>完成支付，超时订单将自动取消。</p>
          <p class="payment-detail">我们不会在您完成支付后的 72 小时内发货，您的支付将用作捐赠</p>
          <p class="payment-detail" style="color:red">支付成功后文档或源码将自动发至您填写的邮箱中</p>
        </div>
        <div class="pay-info">
          <span style="color:red">*</span> 昵称：<el-input v-model="nickName" :maxlength="maxLength" class="input" placeholder="请输入您的昵称" @change="checkValid" />
          <br>
          <span style="color:red">*</span> 捐赠金额：<el-select v-model="moneySelect" class="money-select" placeholder="请选择支付金额" @change="changeSelect">
            <el-option label="￥1.00 支付测试（XMall分布式详细文档）" value="1.00" />
            <el-option label="￥38.00 感谢捐赠（XMall单体版源码及文档）" value="38.00" />
            <el-option label="自定义 随意撒币" value="custom" />
          </el-select><br>
          <div v-if="moneySelect === 'custom'">
            <span style="color:red">*</span> 输入金额：<el-input v-model="money" :maxlength="maxLength" class="input" style="margin-left:10px" placeholder="请输入捐赠金额(最多2位小数，不得低于0.1元)" @change="checkValid" />
            <br>
          </div>
          <span style="color:red">*</span> 通知邮箱：<el-input v-model="email" :maxlength="maxLength" class="input" style="margin-left:10px" placeholder="支付审核结果将以邮件方式发送至您的邮箱" @change="checkValid" />
          <br>
          &nbsp; 留言：<el-input v-model="info" placeholder="请输入您的留言内容" :maxlength="maxLength" class="input" />
        </div>-->
        <!--支付方式-->
        <div class="pay-type">
          <div class="p-title">支付方式</div>
          <div class="pay-item">
            <div :class="{active:payType==1}" @click="payType=1"><img src="/images/alipay@2x.png" alt=""></div>
            <div :class="{active:payType==2}" @click="payType=2"><img src="/images/weixinpay@2x.png" alt=""></div>
          </div>
        </div>

        <div>
          <div class="box-inner">
            <div>
              <span>
                订单金额：
              </span>
              <em><span>¥</span>{{ salesOrder.totalMoney.toFixed(2) }}</em>
              <span>
                实际应付金额：
              </span>
              <em><span>¥</span>{{ salesOrder.totalMoney.toFixed(2) }}</em>
              <mall-button :text="payNow" :class-style="submit?'main-btn':'disabled-btn'" style="width: 120px;height: 40px;font-size: 16px;line-height: 38px" @btnClick="handlePay()" />
            </div>
          </div>
        </div>

      </div>
    </mall-shelf>
    <div class="confirm-table-title">
      <span class="name">商品信息</span>
      <div>
        <span class="price">单价</span>
        <span class="num">数量</span>
        <span class="subtotal">小计</span>
      </div>
    </div>
    <!--商品-->
    <div class="confirm-goods-table">
      <div v-for="(item,i) in salesOrder.items" :key="i" class="cart-items">
        <div class="name">
          <div class="name-cell ellipsis">
            <a title="" target="_blank" @click="goodsDetail(item.skuId)">{{ item.spuName }}</a>
          </div>
        </div>
        <div class="n-b">
          <div class="price">¥ {{ item.price }}</div>
          <div class="goods-num">{{ item.qty }}</div>
          <div class="subtotal">
            <div class="subtotal-cell"> ¥ {{ item.price * item.qty }}<br></div>
          </div>
        </div>
      </div>
    </div>
    <!--合计-->
    <div class="order-discount-line">
      <p style="font-size: 14px;font-weight: bolder;"> <span style="padding-right:47px">商品总计：</span>
        <span style="font-size: 16px;font-weight: 500;line-height: 32px;">¥ {{ salesOrder.totalMoney.toFixed(2) }}</span>
      </p>
      <p><span style="padding-right:30px">运费：</span><span style="font-weight: 700;">+ ¥ 0.00</span></p>
    </div>
  </div>
</template>

<script>
import MallShelf from '@/components/MallShelf'
import MallButton from '@/components/MallButton'
import StorageUtils from '@/utils/StorageUtils'
import GoodsApi from '@/api/goods/GoodsApi.js'
import SalesOrderApi from '@/api/order/SalesOrderApi'

export default {
  components: {
    MallShelf,
    MallButton
  },
  data() {
    return {
      orderId: null,
      salesOrder: {
        items: []
      },
      payType: 1,
      addList: {},
      goodsList: [],
      addressId: 0,
      skuId: '',
      qty: '',
      userId: '',
      orderTotal: 0,
      userName: '',
      tel: '',
      streetName: '',
      payNow: '立刻支付',
      submit: false,
      nickName: '',
      money: '1.00',
      info: '',
      email: '',
      type: '',
      moneySelect: '1.00',
      isCustom: false,
      maxLength: 30
    }
  },
  created() {
    this.userId = StorageUtils.get('userId')
    this.orderId = this.$route.query.orderId
    if (this.orderId) {
      this.getOrderDetail(this.orderId)
    } else {
      this.$router.push({ path: '/' })
    }
  },
  methods: {
    messageFail(m) {
      this.$message.error({
        message: m
      })
    },
    goodsDetail(id) {
      window.open(window.location.origin + '#/goodsDetail?skuId=' + id)
    },
    getOrderDetail() {
      SalesOrderApi.get(this.orderId).then(response => {
        this.salesOrder = response.data
        // 显示省市区
        this.selectedRegion = [response.data.receiverProvince, response.data.receiverCity, response.data.receiverDistrict]
        this.loading = false
      })
    },
    handlePay() {
      this.payNow = '支付中...'
      this.submit = false
      if (this.payType === 1) {
        this.type = 'Alipay'
      } else if (this.payType === 2) {
        this.type = 'Wechat'
      } else {
        this.type = '其它'
      }
      GoodsApi.payMent({
        nickName: this.nickName,
        money: this.money,
        info: this.info,
        email: this.email,
        orderId: this.orderId,
        userId: this.userId,
        payType: this.type,
        custom: this.isCustom
      }).then(res => {
        if (res.success === true) {
          StorageUtils.set('payNum', res.result)
          StorageUtils.set('setTime', 90)
          StorageUtils.set('price', this.money)
          StorageUtils.set('isCustom', this.isCustom)
          if (this.payType === 1) {
            this.$router.push({ path: '/order/alipay' })
          } else if (this.payType === 2) {
            this.$router.push({ path: '/order/wechat' })
          } else {
            this.$router.push({ path: '/order/alipay' })
          }
        } else {
          this.payNow = '立刻支付'
          this.submit = true
          this.messageFail(res.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
  .w {
    padding-top: 39px;
  }

  .order-info {
    padding: 60px 0 55px;
    color: #333;
    background: #fff !important;
    h3 {
      padding-bottom: 14px;
      line-height: 36px;
      text-align: center;
      font-size: 36px;
      color: #212121;
    }
    .payment-detail {
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #999;
    }
  }

  /*支付类型*/
  .pay-type {
    margin: 0 auto;
    width: 90%;
    padding-bottom: 30px;
    .p-title {
      font-size: 18px;
      line-height: 40px;
      padding: 0 10px;
      position: relative;
      &:before {
        content: ' ';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid #ccc;
      }
    }

  }

  .pay-type {
    .pay-item {
      display: flex;
      align-items: center;
      div {
        margin-top: 20px;
        width: 175px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E5E5E5;
        cursor: pointer;
        border-radius: 6px;
        margin-right: 10px;
        background: #FAFAFA;
        &.active {
          border-color: #6A8FE5;
          background: #fff;
        }
        img {
          display: block;
          height: 34px;
          margin: 8px auto;
        }
      }
    }
  }

  .box-inner {
    line-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    > div {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
    em {
      margin-left: 5px;
      font-size: 24px;
      color: #d44d44;
      font-weight: 700;
      margin-right: 20px;
      span {
        margin-right: 4px;
        font-size: 16px;

      }
    }
  }

  .confirm-detail {
    padding: 0 30px 25px;
    border-top: 1px solid #d5d5d5;
    .info-title {
      height: 14px;
      margin: 30px 0 17px;
      line-height: 14px;
      font-weight: bolder;
      color: #333;
    }
    .info-detail {
      line-height: 24px;
      color: #666;
    }
  }

  .confirm-table-title {
    padding: 3px 0 0 33px;
    border-top: 1px solid #D5D5D5;
    line-height: 54px;
    font-weight: bolder;
    color: #000;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      width: 175px;
      text-align: left;
    }
    .price {
      padding-left: 80px;
    }
    .num {
      padding-left: 75px;
    }
    .subtotal {
      padding-left: 72px;
    }
  }

  .confirm-goods-table {
    border-top: 1px solid #D5D5D5;
    .cart-items {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      a {
        color: #333;
      }
    }
    .n-b {
      display: flex;
      align-items: center;
      justify-content: center;
      > div {
        color: #626262;
        font-weight: 700;
        width: 175px;
        text-align: center;
      }
    }
  }

  .order-discount-line {
    padding: 22px 30px 53px;
    border-top: 1px solid #D5D5D5;
    line-height: 24px;
    text-align: right;
    font-size: 12px;
    &:first-child {
      line-height: 32px;
      text-align: right;
      font-size: 14px;
      font-weight: bolder;
    }
  }

  .name {
    width: 40%;
  }

  .name-cell {
    padding-left: 33px;
  }

  .input {
    width:30%;
    margin:0 0 1vw 38px;
  }

  .pay-info {
    margin-top: -2vw;
    text-align: center;
  }

  .money-select {
    width: 31%;
    padding-left: 10px;
    margin-bottom: 1vw;
  }
</style>
